<template>
  <div class="by-stages">
    <div class="suoyin" style="height: 0"></div>
    <img src="../../public/pic/购车立享.jpg" alt="" />
    <!-- 金融服务 -->
    <el-row :gutter="20">
      <el-col :span="24"><h1>金融服务</h1></el-col>
      <el-col :span="9">
        <div class="choose">
          <h2>1.请选择您心仪的海豹座驾</h2>

          <el-select
            style="margin-top: 20px"
            v-model="value"
            placeholder="请选择车型"
            @change="handleChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div v-if="gprice">
            <img :src="lpic" alt="" />
            <h3>{{ title }}</h3>
            <div class="tj">
              <p>火爆价&nbsp;&nbsp;¥{{ gprice }}万元</p>
              <h4>优选推荐</h4>
              <h4>
                期限<span>{{ gprice > 25 ? 36 : 24 }}期</span>
              </h4>
              <h4>
                首付<span
                  >{{
                    Math.round(
                      gprice > 25 ? gprice * 100 * 30 : gprice * 100 * 40
                    )
                  }}元</span
                >
              </h4>
            </div>
            <button
              @click="submit"
              style="
                padding: 10px 15px;
                background: #ddd;
                border: 1px solid #dcdfe6;
                border-radius: 8px;
                cursor: pointer;
              "
            >
              一键设置
            </button>
            <h5>
              <p>注:</p>
              <p>
                &nbsp;&nbsp;*
                以上金融方案由比亚迪汽车金融有限公司提供，您通过本计算器测算结果仅供参考，实际贷款方案详情请咨询当地经销商。
              </p>
            </h5>
          </div>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="calcultor">
          <h2>2.请选择您觉得合适的方案</h2>
          <!-- 期限 -->
          <div class="block">
            <span class="calcultor-title">选择期限</span>
            <el-slider
              v-model="value1"
              :step="12"
              :min="0"
              :max="60"
              :show-tooltip="false"
              @input="relation1"
            >
            </el-slider>
            <span>{{ value1 }}期</span>
          </div>
          <!-- 首付 -->
          <div class="block">
            <span class="calcultor-title">首付</span>
            <el-slider
              v-model="value2"
              :step="1"
              :min="0"
              :max="100"
              :show-tooltip="false"
              @input="relation2"
            >
            </el-slider>
            <span>{{ Math.round(value2 * 100 * gprice) }}元</span>
          </div>
          <!-- 贷款金额 -->
          <div class="block">
            <span class="calcultor-title">贷款金额</span>
            <el-slider
              v-model="value3"
              :step="1"
              :min="0"
              :max="100"
              :show-tooltip="false"
              @input="relation3"
            >
            </el-slider>
            <span>{{ Math.round(value3 * 100 * gprice) }}元</span>
          </div>

          <ul>
            <li>
              <h3>首付</h3>
              <h4>{{ Math.round(value2 * 100 * gprice) }}元</h4>
            </li>
            <li>
              <h3>每月还款</h3>
              <h4>
                {{
                  value1 == 0
                    ? 0
                    : (
                        (((Math.round(value3 * 100 * gprice) * value1) / 12) *
                          (value1 == 0
                            ? 0
                            : value1 == 12
                            ? 0.056
                            : value1 == 24
                            ? 0.06
                            : value1 == 36
                            ? 0.0615
                            : value1 == 48
                            ? 0.064
                            : 0.0655) +
                          Math.round(value3 * 100 * gprice)) /
                        value1
                      ).toFixed(2)
                }}元
              </h4>
            </li>
            <li>
              <h3>利息</h3>
              <!-- 0 5.6% 6.0% 6.15% 6.4% 6.55% -->
              <h4>
                {{
                  (
                    ((Math.round(value3 * 100 * gprice) * value1) / 12) *
                    (value1 == 0
                      ? 0
                      : value1 == 12
                      ? 0.056
                      : value1 == 24
                      ? 0.06
                      : value1 == 36
                      ? 0.0615
                      : value1 == 48
                      ? 0.064
                      : 0.0655)
                  ).toFixed(2)
                }}元
              </h4>
            </li>
          </ul>
          <p><span> 感谢您对比亚迪汽车的支持，祝您早日提走爱车！ </span></p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //选择分期 默认12
      value1: 12,
      //选择首付 默认15
      value2: 15,
      // 选择贷款金额 默认85
      value3: 85,
      // 选择车型,显示数据
      title: "",
      lpic: "",
      gprice: "",
      value: "",
      options: [
        {
          value: "1",
          label: "550km标准续航后驱版精英型",
        },
        {
          value: "2",
          label: "550km标准续航后驱版尊贵型",
        },
        {
          value: "3",
          label: "700km长续航后驱版",
        },
        {
          value: "4",
          label: "650km四驱性能版",
        },
      ],
    };
  },

  methods: {
    //一键设置优选推荐
    submit() {
      this.value1 = this.gprice > 25 ? 36 : 24;
      this.value2 = this.gprice > 25 ? 30 : 40;
    },
    //期限与首付关联
    relation1() {
      if (this.value1 == 0) {
        this.value2 = 100;
      } else if (this.value2 == 100) {
        this.value2 = 15;
      }
    },
    // 首付和贷款金额相互关联
    relation2() {
      this.value3 = 100 - this.value2;
      if (this.value2 == 100) {
        this.value1 = 0;
      } else if (this.value1 == 0) {
        this.value1 = 12;
      }
    },
    // 贷款金额和首付关联
    relation3() {
      this.value2 = 100 - this.value3;
    },

    // 获取车型价格图片数据
    handleChange(value) {
      let url = `/pic?cid=${value}`;
      this.axios.get(url).then((res) => {
        this.gprice = res.data.data[0].gprice;
        this.lpic = res.data.data[0].lpic;
        this.title = res.data.data[0].title;
      });
    },
  },
};
</script>

<style lang="scss">
html {
  overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.by-stages {
  img {
    width: 100%;
  }
  h1 {
    color: #545c64;
    margin: 20px;
  }
  .choose {
    border: 1px solid #dcdfe6;
    border-bottom: 0;

    border-radius: 20px;
    height: 740px;
    text-align: center;

    input {
      width: 200px;
    }
    h2 {
      padding: 10px;
      background: #545c64;
      border-radius: 20px 20px 0 0;
      color: #fff;
      font-weight: 400;
    }

    div {
      img {
        width: 100%;
        padding-right: 10%;
      }
      .tj {
        margin: 0 auto;
        width: 50%;
        text-align: left;
        p {
          color: #980000;
          font-size: 24px;
          margin: 20px;
        }

        h4 {
          margin: 10px;

          span {
            float: right;
          }
        }
      }
      h5 {
        width: 70%;
        text-align: left;
        margin: 20px auto;
      }
    }
  }

  .calcultor {
    border: 1px solid #dcdfe6;
    border-bottom: 0;
    border-radius: 20px;
    height: 740px;

    h2 {
      padding: 10px;
      background: #545c64;
      border-radius: 20px 20px 0 0;
      color: #fff;
      font-weight: 400;
    }

    .block {
      width: 80%;
      margin: 10px auto;
      text-align: left;

      .calcultor-title {
        font-size: 22px;
        display: block;
        padding: 30px 0 15px 0;
        font-weight: 600;
      }
      .el-slider {
        margin: 0 auto;
        width: 75%;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5%;
      }
      span {
        display: inline-block;
        font-size: 22px;
      }
    }
    ul {
      width: 80%;
      display: flex;
      justify-content: center;
      margin: 50px;
      & > li:nth-child(1),
      & > li:nth-child(2) {
        border-right: 2px solid black;
      }
      li {
        list-style: none;
        width: 30%;
        h3 {
          font-size: 22px;
          font-weight: 500;
          line-height: 22px;
          padding: 20px;
        }
        h4 {
          color: #980000;
          font-size: 20px;
        }
      }
    }
    p {
      width: 90%;
      span {
        font-size: 18px;
        display: inline-block;
        margin-top: 20px;
        float: right;
      }
    }
  }
}
</style>